<template>
  <div id="app">
    <div id="loading" v-show="shopShow">正在加载出租车数据...</div>
    <div id="menuLeft">
      <div id="step1">
        <h4>数据选择：</h4>
        <el-cascader
            ref="getSelectData"
            placeholder="试试搜索数据名称"
            v-model="dataValue"
            :options="options"
            @change="handleSelectChange"
            filterable></el-cascader>
      </div>
      <!--      <el-card style="height:100%;width:100%;">-->
      <div id="VisualShow">
        <h4>选择三维柱状图渲染方式</h4>
        <el-button @click="add3DAutonavi" :disabled="isDisabled">三维柱状图</el-button>
        <el-button @click="clear">清除图层</el-button>
      </div>
      <!--      </el-card>-->
    </div>
    <!--展示高德的div容器-->
    <div id="autonavi_map" :style="{height:'100%',width:'100%'}"></div>
  </div>
</template>
<script>

import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "8029053d080e5c7aab8b1151b4bd2a61",
};

export default {
  data() {
    return {
      dataValue: [],
      options: this.$store.state.dataPoint[0].children,
      shopShow: false,

      isDisabled:true,
      //高德相关数据初始化
      //高德对应的可视化平台组件
      autonavi_loca:null,
      //高德地图的地图组件
      autonavi_map:null,
      //比例尺
      autonavi_lengend:null,
      //装载转换过来数据
      geo: null,
      //转换之后的数据
      DataAll: [],
      downSelectData: '',

    };
  },
  created() {
    this.$store.commit('loadMenuDataPoint')
  },
  mounted() {
    this.initGaoDeMap();

  },
  methods: {
    // 高德地图初始化
    initGaoDeMap() {
      AMapLoader.load({
        key: "3b20e3a90d6b5fdd4d073285823e4ab5", //key值是key值 和安全密钥不同
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.HeatMap', 'AMap.ScatterPointLayer', 'AMap.MarkerCluster'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        "Loca": {  //是否加载 Loca,缺省不加载
          "version": '2.0.0'  //Loca 版本,缺省1.3.2
        }
      })
          .then((AMap) => {
            // 初始化地图
            this.autonavi_map = new AMap.Map("autonavi_map", {
              viewMode: "3D", //  是否为3D地图模式
              zoom: 11.4, // 初始化地图级别
              center: [116.404582, 39.90359], //中心点坐标
              resizeEnable: true,
              //设置地图样式
              // mapStyle: 'amap://styles/029d1d7e79696c27eb2ab6f4d056d186'
              mapStyle: 'amap://styles/dark'
            });
          })
          .catch((e) => {
            console.log(e);
          });
    },

    //下拉框触发的事件
    handleSelectChange(val){
      this.clear()
      //显示加载数据等待框
      this.shopShow = true;
      this.isDisabled = true;
      let that = this;
      let downSelectData = this.$refs.getSelectData.getCheckedNodes()
      this.downSelectData = downSelectData[0].data.value
      console.log(this.downSelectData,'获取下拉节点的值');
      //通过下拉框的值来获取对应的服务器数据
      this.request.get("/taxiData/clickHot",
          {
            params:{
              downSelectData: this.downSelectData,
            }
          },
      ).then(res => {
        //初始状态先清空数据
        this.DataAll = []
        //开始组装数据，组装成geojson格式的数据
        for (let i = 0; i < res.data.length; i++) {
          //高德数据组装
          this.DataAll.push(
              {
                "type": "Feature",
                "geometry": {
                  "type": "Point",
                  "coordinates": [res.data[i].lng, res.data[i].lat]
                },
                "properties": {
                  // 生成对应的权重值(展示在界面上就是高度)。生成[1,10]的随机数
                  "count": Math.floor(Math.random() * 2) + 1
                }
              }
          )
        }
        console.log(this.DataAll,"初始数据加载完毕！")
        that.shopShow = !that.shopShow;

        that.isDisabled = !that.isDisabled;
      })
    },

    // 第一个功能 高德三维柱状图 “车辆密度图”
    add3DAutonavi() {

      //this.clear()
      if (this.geo == null) {
        // 设置地图的显示层级
        this.autonavi_map.setZoom(12.5, true)
        // 设置视图倾角
        this.autonavi_map.setPitch(45, true);
        this.autonavi_map.setCenter([116.404582, 39.90359])
        this.autonavi_loca = new Loca.Container({
          map: this.autonavi_map,
          opacity: 1,
        });
        // 环境光，对于可以接受光照的图层（PolygonLayer 等）会增加环境光的影响。环境光只能有一个，多余的会被忽略。
        this.autonavi_loca.AmbientLight = {
          intensity: 0.3,
          color: '#fff',
        };
        // 平行光，对于可以接受光照的图层（PolygonLayer 等）会增加平行光的影响。平行光一般用来模拟太阳的光照。 它的方向由 position 射向 target。position和target的坐标是一个位置加 z 值（单位米）高度决定。比如: [1, 1, 1000] 代表x:1, y:1, 高度1000米。 如果模拟一个从正南方向的平行光，可以设置target: [0,0,0], position: [0,-1,0]
        this.autonavi_loca.DirectionalLight = {
          intensity: 1.2,
          color: '#fff',
          target: [0, 1, 0],
          position: [0, -1, 1],
        };
        // 点光，对于可以接受光照的图层（PolygonLayer 等）会增加点光的影响。点光源通常用来突出展示场景中的某些物体。 它的位置和平行光不太一样，x和y是地图上的经纬度位置，z是高度米，比如北京上空一万米的位置放一个点光源：position: [116.39079, 39.90624, 10000]。 光照的distance代表光能照射的最远距离是多少。
        this.autonavi_loca.PointLight = {
          color: 'rgb(100,100,100)',
          position: [114.2517, 30.552128, 20000],
          intensity: 1.6,
          // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
          distance: 100000,
        };


        //加载数据
        this.geo = new Loca.GeoJSONSource({
          data:{
            type: "FeatureCollection",
            features: this.DataAll
          },
        });

        // 格图，将普通的点数据按照网格划分成若干区域，每个网格区域都会包含落在此区域内的点数据信息。 每个网格格子支持单独设置自定义的高度信息、颜色信息。 要注意的是：我们认为所有网格格子必须是唯一的大小（radius）和间隙（gap）。 我们还在带有高度的网格中加入了可接受光照信息的属性：acceptLight。假如设置了光照并在图层中开启接受光照， 那么每个立体网格将会有光照反射的效果。
        var ll = new Loca.GridLayer({
          // loca,
          zIndex: 10,
          opacity: 1,
          visible: true,
          zooms: [2, 22],
          acceptLight: true,

        });
        //设置柱状图颜色 蓝紫色(最疏)＜青绿色＜青色＜淡黄色＜深黄色＜淡红色＜红色(最密)来区分的。
        var colors = ['#FF5252', '#FB8C00', '#FFBF3A', '#F1E229', '#9CD523', '#23D561', '#20C2E1', '#153FA5'].reverse();
        var heights = [100, 200, 400, 600, 800, 1400, 1800, 4000];

        //添加数据，进行渲染
        ll.setSource(this.geo);

        ll.setStyle({
          unit: 'meter',
          radius: 66,
          gap: 0,
          altitude: 100,
          height: function (index, feature) {
            var ranks = feature.coordinates && feature.coordinates.length || 0;
            return ranks < 5 ?
                heights[0] : ranks < 10 ?
                    heights[1] : ranks < 20 ?
                        heights[2] : ranks < 30 ?
                            heights[3] : ranks < 50 ?
                                heights[4] : ranks < 80 ?
                                    heights[5] : ranks < 100 ?
                                        heights[6] : heights[7];
          },
          topColor: function (index, feature) {
            var ranks = feature.coordinates && feature.coordinates.length || 0;
            return ranks < 5 ?
                colors[0] : ranks < 10 ?
                    colors[1] : ranks < 20 ?
                        colors[2] : ranks < 30 ?
                            colors[3] : ranks < 50 ?
                                colors[4] : ranks < 80 ?
                                    colors[5] : ranks < 100 ?
                                        colors[6] : colors[7];
          },
          sideTopColor: function (index, feature) {
            var ranks = feature.coordinates && feature.coordinates.length || 0;
            return ranks < 5 ?
                colors[0] : ranks < 10 ?
                    colors[1] : ranks < 20 ?
                        colors[2] : ranks < 30 ?
                            colors[3] : ranks < 50 ?
                                colors[4] : ranks < 80 ?
                                    colors[5] : ranks < 100 ?
                                        colors[6] : colors[7];
          },
          sideBottomColor: function (index, feature) {
            var ranks = feature.coordinates && feature.coordinates.length || 0;
            return ranks < 5 ?
                colors[0] : ranks < 10 ?
                    colors[1] : ranks < 20 ?
                        colors[2] : ranks < 30 ?
                            colors[3] : ranks < 50 ?
                                colors[4] : ranks < 80 ?
                                    colors[5] : ranks < 100 ?
                                        colors[6] : colors[7];
          }
        });
        this.autonavi_loca.add(ll);

        // 图例
        this.autonavi_lengend = new Loca.Legend({
          loca: this.autonavi_loca,
          title: {
            label: '车辆密度(辆)',
            fontColor: 'rgba(255,255,255,0.4)',
            fontSize: '16px',
          },
          style: {
            backgroundColor: 'rgba(255,255,255,0.1)',
            right: '20px',
            bottom: '20px',
            fontSize: '12px',
          },
          dataMap: [
            {label: 100, color: colors[7]},
            {label: 80, color: colors[6]},
            {label: 50, color: colors[5]},
            {label: 40, color: colors[4]},
            {label: 30, color: colors[3]},
            {label: 20, color: colors[2]},
            {label: 10, color: colors[1]},
            {label: 5, color: colors[0]},
          ],
        });
      }
    },

    // 清除图层
    clear() {
      /**
       * 高德地图相关的地图图层清理
       */
      // 移除图例 ，对应第二个功能中的图例
      if (this.autonavi_lengend != null) {
        this.autonavi_lengend.remove();
      }
      //清空数据
      this.geo = null
      // 设置倾斜角度 默认回归到0°
      this.autonavi_map.setPitch(0, true);

      // 清楚loca图层上显示的样式
      if (this.autonavi_loca != null) {
        this.autonavi_loca.clear();
      }

    }
  },
  beforeDestroy() {
    this.$store.commit('refresh')
  }
};
</script>
<style scoped>
#app{
  position: relative;
  height:100%;
  width:100%;
}
#loading {
  z-index: 99;
  position:absolute;
  top: 50%;
  left: 48%;
  margin-left: -130px;
  text-align: center;
  margin-top: -50px;
  width: 280px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: yellow;
  font-size: 20px;
}
#menuLeft {
  position: absolute;
  top: 20px;
  left: 12px;
  width: 22%;
  height: 30%;
  z-index: 100;
  font-size: 20px;
  font-weight: 700;
  color: white;
  background-color: rgba(49, 51, 53, 0.7);
  background-image: url("../../assets/image/public_resource/border_new1.png");
  background-size: 100% 100%;
  /*opacity: 0.8;*/
  border-radius: 20px;
  overflow: auto;
}
#step1{
  margin-left: 30px;
}
#VisualShow{
  margin-left: 30px;
}

</style>